import { AutoList, HeaderBar, Page, TabItem } from '@/cross/components';
import initImage from '@/cross/components/Image';
import initImageBackground from '@/cross/components/ImageBackground';
import initScrollView from '@/cross/components/ScrollView';
import initText from '@/cross/components/Text';
import initView from '@/cross/components/View';
import { CrossPageProps } from '@/cross/pages/PropType';
import tagStore from '@/cross/stores/tag';
import { $service } from '@/cross/utils';
import { ITemplate } from '@/types/modules/template/types';
import { action, computed, observable } from 'mobx';
import { observer } from 'mobx-react';
import React, { Component } from 'react';
import TemplateItem from '../components/TemplateItem';
import * as styles from './TemplateList.scss';

const View = initView(styles);
const Text = initText(styles);
const Image = initImage(styles);
const ScrollView = initScrollView(styles);
const ImageBackground = initImageBackground(styles);

interface IProps extends CrossPageProps {}

@observer
class PageView extends Component<IProps> {
  componentDidMount() {
    this.refresh();
    // 获取分类
    tagStore.fetchTagData(5, 1);
  }

  autoListRef: AutoList<ITemplate> | null = null;
  @observable tab = 0;
  @action changeTab = (val: number) => {
    this.tab = val;
    this.refresh();
  };
  @computed get tagsTree() {
    return tagStore.shopTagData[1] ? tagStore.shopTagData[1][5] || [] : [];
  }

  refresh = () => {
    this.autoListRef && this.autoListRef.refresh();
  };

  onItemAction = (action: 'edit' | 'remove' | 'more' | 'design', item: ITemplate) => {};

  handleClickDropdown = (item: ITemplate, index: number) => {
    this.onItemAction(index === 0 ? 'remove' : 'more', item);
  };

  fetchDate = (currentPage: number, pageSize?: number) => {
    return new Promise((resolve) => {
      let filterForm = {
        tag_id: this.tab ? this.tab : undefined,
      };
      let params = {
        currentPage,
        pageSize,
        count: false,
        filterForm,
      };
      $service('template', 'get', params)
        .then(resolve)
        .catch((e) => {
          resolve([]);
        });
    });
  };

  renderItem = ({ item, index }: { item: ITemplate; index: number }) => {
    return <TemplateItem key={index} item={item} />;
  };

  render() {
    return (
      <Page className="M-b-c-e">
        <HeaderBar
          title="模板管理"
          titleAlign="left"
          mode="light"
          leftContent={null}
          showBack={false}
          bottomContent={
            <View className="M-flexbox-horizontal M-p-t-5 M-p-l-10">
              <TabItem
                title="全部"
                active={this.tab === 0}
                onClick={this.changeTab.bind(this, 0)}
              />
              {this.tagsTree.map((tag) => {
                return (
                  <TabItem
                    key={tag.tag_id}
                    title={tag.tag_name || ''}
                    active={this.tab === tag.tag_id}
                    onClick={this.changeTab.bind(this, tag.tag_id || 0)}
                  />
                );
              })}
            </View>
          }
          rightContent={
            <View className="M-p-r-10">
              {/* <Button color='primary' onClick={this.put.bind(this, undefined)}>
                新建模板
              </Button> */}
            </View>
          }
        />
        <AutoList<ITemplate>
          onFetchData={this.fetchDate}
          renderHeader={<View className="M-p-t-5" />}
          renderItem={this.renderItem}
          gutter={[10, 10]}
          itemViewProps={{ col: true, md: 12, lg: 12, xl: 12, xxl: 12 }}
          footerMarginTop={-32}
          ref={(node) => {
            this.autoListRef = node;
          }}
          emptyText="暂无模板"
        />
      </Page>
    );
  }
}

export default PageView;
